import {
  computed,
  defineComponent,
  onMounted,
  PropType,
  reactive,
  ref,
  watch,
} from "vue";
import { useIpApi } from "../api/ip";
import { ElMessage } from "element-plus";

const IpData = defineComponent({
  name: "IpData",

  props: {
    data: {
      type: Object as PropType<TIpCount>,
      required: true,
    },
  },

  setup(props, { attrs }) {
    const data = computed(() => props.data);

    const newIp = reactive({
      ipInfo: {
        ip: "",
        name: "",
        mac: "******",
        location: "",
        domain: "5G",
        cpe: "无",
        enable: false,
        httpEnable: false,
        httpUrl:""
      },
    });

    const handleAdd = () => {
      isShowIpInfo.value = true;
    };

    const isShowIpInfo = ref(false);
    const abortModify = () => {
      isShowIpInfo.value = false;
    };

    const submitModify = async () => {
      const res = await useIpApi().postIpInfo(newIp.ipInfo);
      if (res.status === 201) {
        ElMessage({
          showClose: true,
          message: "新增成功",
          type: "success",
        });
      } else {
        ElMessage({
          showClose: true,
          message: "新增失败",
          type: "error",
        });
      }

      isShowIpInfo.value = false;
    };

    return () => (
      <>
        {isShowIpInfo.value ? (
          <div class="p-48  px-96 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-blue-300 bg-opacity-70 z-20 rounded-lg">
            <div class="w-72 h-76 bg-white rounded-lg m-2 flex flex-col px-2 text-black">
              <div class="my-2">IP信息增加</div>
              <div>
                <label class="input input-bordered flex items-center gap-2 input-sm">
                  <span>IP地址:</span>
                  <input
                    type="text"
                    class="grow"
                    placeholder="Ip地址"
                    v-model={newIp.ipInfo.ip}
                  />
                </label>

                <label class="input input-bordered flex items-center gap-2 input-sm">
                  <span> 名称 : </span>
                  <input
                    type="text"
                    class="grow"
                    placeholder="Name"
                    v-model={newIp.ipInfo.name}
                  />
                </label>

                <label class="input input-bordered flex items-center gap-2 input-sm">
                  <span> CPE : </span>
                  <input
                    type="text"
                    class="grow"
                    placeholder="Cpe"
                    v-model={newIp.ipInfo.cpe}
                  />
                </label>

                <label class="input input-bordered flex items-center gap-2 input-sm">
                  <span>地址 : </span>
                  <input
                    type="text"
                    class="grow"
                    placeholder="地址"
                    v-model={newIp.ipInfo.location}
                  />
                </label>

                <label class="input input-bordered flex items-center gap-2 input-sm">
                  <span>网域 : </span>
                  <input
                    type="text"
                    class="grow"
                    placeholder="网域"
                    v-model={newIp.ipInfo.domain}
                  />
                </label>

                <label class="input input-bordered flex items-center gap-2 input-sm">
                  <span>MAC : </span>
                  <input
                    type="text"
                    class="grow"
                    placeholder="MAC"
                    v-model={newIp.ipInfo.mac}
                  />
                </label>

                <label class="input input-bordered flex items-center gap-2 input-sm ">
                  <span>启用 : </span>
                  <input
                    type="checkbox"
                    class="checkbox checkbox-sm"
                    v-model={newIp.ipInfo.enable}
                  />
                </label>

                <label class="input input-bordered flex items-center gap-2 input-sm ">
                  <span>HttpEnable : </span>
                  <input
                    type="checkbox"
                    class="checkbox checkbox-sm"
                    v-model={newIp.ipInfo.httpEnable}
                  />
                </label>

                <label class="input input-bordered flex items-center gap-2 input-sm">
                  <span>HttpUrl : </span>
                  <input
                    type="text"
                    class="grow"
                    placeholder="Http Url"
                    v-model={newIp.ipInfo.httpUrl}
                  />
                </label>
              </div>
              <div class="flex flex-row justify-around my-2">
                <button
                  class="btn btn-outline btn-info btn-sm"
                  onClick={() => submitModify()}
                >
                  提交
                </button>

                <button
                  class="btn btn-outline btn-info btn-sm"
                  onClick={() => abortModify()}
                >
                  放弃
                </button>
              </div>
            </div>
          </div>
        ) : (
          <div></div>
        )}

        <div class="bg-blue-400 rounded-md w-full ">
          {/* 其他数据 */}

          <div class="flex flex-row">
            <div class="w-1/4 text-center text-sm">
              总数：
              <span class="text-white text-3xl">{data.value.totalCount}</span>
            </div>

            <div class="w-1/4 text-center text-sm">
              在线：
              <span class="text-green-400 text-3xl">
                {data.value.onlineCount}
              </span>
            </div>

            <div class="w-1/4 text-center text-sm">
              离线：
              <span class="text-red-500 text-3xl">
                {data.value.offlineCount}
              </span>
            </div>

            <div class="w-1/4 text-center text-sm">
              未使用：
              <span class="text-gray-300 text-3xl">
                {data.value.disableCount}
              </span>
            </div>

            <button
              class="bg-pink-300 w-10 my-auto mr-1 rounded-md text-sm absolute right-4 top-4"
              onClick={handleAdd}
            >
              Add
            </button>
          </div>
        </div>
      </>
    );
  },
});
export default IpData;
